<template>
  <!-- 只能有一个div根标签 -->
  <div class="from-box">
    <el-form ref="form" :model="form" label-width="80px" :inline="true">
      <el-form-item label="目录名称">
        <el-input v-model="form.search"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select placeholder="请选择" v-model="form.check">
          <el-option label="启用" value="1"></el-option>
          <el-option label="禁用" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-button @click="dellist">清除</el-button>
      <el-button type="primary" @click="onSubmit">搜索</el-button>
    </el-form>
    <!-- 右边 -->
    <el-row>
      <el-button icon="el-icon-edit" type="success" @click="addlist"
        >新增目录</el-button
      >
    </el-row>
    <!-- //弹出层 -->
    <directorysAdd
      :subjectlist="subjectlist"
      @addsubject="addsubject"
      ref="prop"
    ></directorysAdd>
  </div>
</template>

<script>
import { Alllist, addsubject, subjectlist } from '../../../api/hmmm/directorys'// 请求
import Bus from './adb.js' // eventBus事件总线

import directorysAdd from './directorys-add.vue'
export default {
  // 自定义组件名字(PascalCase)
  name: 'directoryHeader',
  components: { directorysAdd },
  props: {
    list: {
      type: Array
    }
  },
  data () {
    return {
      form: {
        search: '',
        check: '',
        searchlist: []// 储存搜索结果
      },
      subjectlist: []// 弹出层学科列表
    }
  },
  computed: {},
  watch: {},
  created () {
  },

  mounted () { },
  methods: {
    // 点击搜索
    async onSubmit () {
      try {
        // console.log({
        //   directoryName: this.form.search,
        //   state: this.state
        // })
        const { data } = await Alllist({
          directoryName: this.form.search,
          state: this.state
        })
        console.log(data)
        this.searchlist = data.items
        // 把筛选结果传递给兄弟组件
        Bus.$emit('search', this.searchlist)
      } catch (err) {
        console.log(err.message)
      }
    },
    // 清空数据
    dellist () {
      console.log(1)
      this.form.search = ''
      this.form.check = ''
    },
    // 弹出层数据
    async addlist () {
      // 打开弹出层
      this.$refs.prop.dialogFormVisible = true
      // 修改目录标题
      this.$refs.prop.proptitle = 0
      // 学科列表数据
      const { data } = await subjectlist()
      console.log(data)
      this.subjectlist = data
    },
    // 弹储层确认添加目录
    async addsubject (subject) {
      await addsubject({
        directoryName: subject.name,
        subjectID: subject.region
      })
      // 兄弟调用渲染页面函数
      Bus.$emit('addlist')
    }
  }
}
</script>

<style scoped lang='scss'>
.from-box {
  display: flex;
  justify-content: space-between;
  el-button {
    width: 56px;
    height: 36px;
  }
  .addel-input {
    display: block;
  }
}
</style>
